<template>
  <div class="app-container">
    <div class="top">
      <div class="info-item">
        <div>
          订单编号: {{ list.orderId }}
        </div>
        <div>
          运单编号: {{ list.id }}
        </div>
        <div>
          下单时间: {{ list.created }}
        </div>
        <div>
          订单状态: {{ list.status===22000 ? '已关闭' : list.status === 23000 ? "待取件" : list.status===23001 ? '已取件' : list.status===23002 ? '网点自寄' : '无' }}
        </div>
      </div>
      <div class="info-xia">
        预计到达日期: {{ list.estimatedArrivalTime }}
      </div>
    </div>
    <el-collapse v-model="activeNames">
      <div class="centext">
        <el-collapse-item title="基本信息" name="1">
          <div class="centext-bt">
            <p class="centext-p"><i class="el-icon-map-location" /> 发货方</p>
            <span class="centext-right">发货人姓名: {{ list.senderName }}</span>
            <span>发货人电话: {{ list.senderPhone }}</span>
            <div class="centext-shou">
              <span class="centext-right">发货方地址: {{ list.senderAddress }}</span>
              <span>详细地址:  {{ list.senderAddress }}</span>
            </div>
          </div>
          <div class="centext-bt">
            <p class="centext-p"><i class="el-icon-help" /> 收货方</p>
            <span class="centext-right">发货人姓名: {{ list.receiverName }}</span>
            <span>收货人电话: {{ list.receiverPhone }}</span>
            <div class="centext-shou">
              <span class="centext-right">收货方地址: {{ list.receiverAddress }}</span>
              <span>详细地址:  {{ list.receiverAddress }}</span>
            </div>
          </div>
        </el-collapse-item>
      </div>

      <div class="yunshu">

        <el-collapse-item title="运输信息" name="2">
          <el-steps :active="active" finish-status="success" space="240px">
            <el-step title="皇姑区营业部" />
            <el-step title="沈阳分拣中心 2" />
            <el-step title="武昌营业部 3" />
          </el-steps>
          <div class="container">
            <div class="left">
              <p>运输任务：	1608087623835418626</p>
              <p>车辆：	辽A123451</p>
              <p>司机：	平秦王,长孙杰</p>
              <p>到达时间：	2023-09-10 21:23:59</p>
            </div>
            <div class="right">
              <p>运输任务：	1608095170466250753</p>
              <p>车辆：	辽B123451</p>
              <p>司机：司沈阳,司东北</p>
              <p>到达时间：	2023-09-10 21:44:13</p>
            </div>
          </div>
        </el-collapse-item>

      </div>

      <div class="bt">

        <el-collapse-item title="货品信息" name="1">
          <div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                fixed
                prop="id"
                label="序号"
                width="108"
              />
              <el-table-column
                fixed
                prop="name"
                label="货品名称"
                width="240"
              />
              <el-table-column
                fixed
                prop="nameTape"
                label="货品类型"
                width="240"
              />
              <el-table-column
                fixed
                prop="Weight"
                label="重量(千克)"
                width="300"
              />
              <el-table-column
                fixed
                prop="Volume"
                label="体积(立方)"
                width="300"
              />
            </el-table>
          </div>

        </el-collapse-item>

      </div>
    </el-collapse>
  </div>

</template>
<script>
import { getOrderApi } from '@/api/businessManagement'
export default {
  data() {
    return {
      activeNames: ['1', '2', '3'],
      active: 0,
      tableData: [{
        id: '1',
        name: '篮球鞋',
        nameTape: '户外运单',
        Weight: '1',
        Volume: '0.0001'
      }],
      list: []
    }
  },
  async created() {
    const res = await getOrderApi(this.$route.params.id)
    console.log(res)
    this.list = res
  },
  methods: {
  }
}

</script>
<style scoped lang="scss">
.app-container {
  background-color: #f4f6f8;
}
.top {
  background-color: #ffffff;
  padding: 20px;
}
.bt {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 20px;
}
.info-item {
display: flex;
  justify-content: space-between;
}
.info-xia1 {
  display: flex;
  justify-content: space-between;
}
.info-xia {
  margin-top: 20px;
}
.centext {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 20px;
}
.centext-right {
  padding-left: 50px;
  padding-right: 120px;
}
.centext-p {
  padding-top: 30px;
}
.centext-shou {
  padding-top: 10px;
}
.yunshu {
  background-color: #ffffff;
  padding: 20px;
}
.container {
    display: flex; /* 使用 flex 布局 */
    margin-left: 50px;
  }

  .left, .right {
     padding: 10px;
  }

 .left {
    margin-right: 50px; /* 设置左侧盒子的左边距为50px */
  }
  /* 样式可以根据需要进行调整 */
  .left {
    background-color: #f4f8fc; /* 左侧背景颜色 */
  }

  .right {
    background-color: #f4f8fc; /* 右侧背景颜色 */
  }
</style>
